<template>
	<!-- <link rel="icon" href="https://nj-hqb.oss-cn-hangzhou.aliyuncs.com/h5/bitbug_favicon.ico"><title>嗨趣宝管理后台</title> -->
	<el-container class="home-container">
		<el-header>
			<div style="padding-left: 20px;" @click="toWelcome">
				<img  src="@/assets/logo2.png" style="width: 145px;" alt="">
			</div>
			<el-button type="danger" @click="logout">登出</el-button>
		</el-header>
		<el-container>
			<el-aside :width="isCollapse ? '64px' : '200px'">
				<div class="toggle-button" @click="toggleCollapse">|||</div>
				<el-menu
					router
				    background-color="#333744"
				    text-color="#fff"
				    active-text-color="#409eff"
					:collapse="isCollapse"
					:collapse-transition="false"
					unique-opened
					:default-active="onRoutes">
						<el-submenu :index="index + ''" v-for="(item,index) in menuList" :key="index">
							<template slot="title">
								<i class="el-icon-menu"></i>
								<span>{{item.name}}</span>
							</template>
							<el-menu-item :index="'/' + itemSon.resCode" v-for="(itemSon,indexSon) in item.children" :key="indexSon">
								<i class="el-icon-s-tools"></i>
								<span slot="title">{{itemSon.name}}</span>
							</el-menu-item>
						</el-submenu>
				</el-menu>
			</el-aside>
			<el-main>
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	var that = this
	export default{
		data(){
			return{
				menuList:[],
				isCollapse:false,
			}
		},
		created() {
			this.getMenuList()
		},
		methods:{
			async logout() {
			  this.$confirm('确认要退出吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			  }).then(async () => {
				  const {data:res} = await this.$http.get('/logOut')
				  console.log(res)
				  if(res.code !==200){
				  	return this.$message.error('退出失败')
				  } 
				  this.$message.success('退出成功')
				this.$router.push("/login");
			  }).catch(() => {
				this.$message({
				  type: 'info',
				  message: '已取消'
				});          
			  });
			},
			async getMenuList(){
				var username =  localStorage.getItem("username");
				const {data:res} = await this.$http.post('/index/getMenu',{"loginName":username})
				console.log(res)
				if(res.code !==200){
					this.$router.push("/login");
					return this.$message.error('请登录')
				} 
				this.menuList = res.data
				this.menuList.forEach(item=>{
					if(item.children==undefined){
						this.$set(item,'children',[{name:item.name,resCode:item.resCode}])
					}
				})
				// console.log(this.menuList);
			},
			toggleCollapse(){
			  this.isCollapse=!this.isCollapse
			},
			toWelcome(){
				this.$router.push({path:'/welcome'})
			}
		},
		computed:{
			onRoutes(){
				let path = this.$route.path.replace('/','');
				let pathw = '/'+path
				return pathw ? pathw : '/';
			}
		}
	}
</script>

<style lang="less" scoped>
	.home-container{
		height: 100%;
	}
	.el-header{
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		div{
			display: flex;
			align-items: center;
		}
		color: #fff;
		font-size: 20px;
		padding-left: 0;
		img{
			height: 48px;
			width: 48px;
			margin-right: 20px;
		}
	}
	.el-aside{
		background-color: #333744;
	}
	.el-main{
		background-color: #eaedf1;
	}
	.el-menu{
		border-right: none;
		padding-top: 20px;
	}
	.toggle-button{
	  background-color: #4a5064;
	  color: #fff;
	  font-size: 10px;
	  line-height: 24px;
	  text-align: center;
	  letter-spacing: 0.2em;
	  cursor: pointer;
	}
</style>
